<template>
  <div class="mapview-main">

    <!-- <div @click="recStop()">录音结束</div> -->
    <div class="mapview-main-border">
      <!-- 背景 -->
      <div class="mapview-bg">
        <iframe
          ref='alimap'
          id="amap"
          src="/b2dMap"
          frameborder="0"
        ></iframe>
      </div>
      <!-- 左對話框 -->
      <div class="box-left">
        <!-- 头部数字 -->
        <div class="map-top">
          <div class="num-cade">
            <div class="logo"><img
                src="../assets/totle.png"
                alt=""
              ></div>
            覆盖资产总数
            <div
              class="num-c"
              ref='numC'
              id='numC'
            >
              <p
                v-for="item in zcTotle"
                v-bind:key="item"
                class="num"
              >{{item}}</p>
            </div>
          </div>
          <div class="num-cade">
            <div class="logo"><img
                src="../assets/f-totle.png"
                alt=""
              ></div>
            覆盖单位总数
            <div class="num-c">
              <p
                v-for="item in dwTotle"
                v-bind:key="item"
                class="num"
              >{{item}}</p>
            </div>
          </div>
        </div>
        <div class="map-card">
          <div class="map-card-title">
            <div class="text"><span>协议分布</span></div>
            <div class="line2"></div>
            <div class="line"></div>
          </div>
          <div class="map-card-body">
            <div
              ref="b3"
              id="b3"
            ></div>
          </div>
        </div>
      </div>
      <!-- 右對話框 -->
      <div class="box-right">
        <!-- 第一对话框 -->
        <div class="map-card">
          <div class="map-card-title">
            <div class="text"><span>漏洞排行</span></div>
            <div class="line2"></div>
            <div class="line"></div>
          </div>
          <div class="map-card-body">
            <div
              ref="b4"
              id="b4"
            ></div>
          </div>
        </div>
        <div class="map-card">
          <div class="map-card-title">
            <div class="text"><span>规则分布</span></div>
            <div class="line2"></div>
            <div class="line"></div>
          </div>
          <div class="map-card-body">
            <div
              ref="b5"
              id="b5"
            ></div>
          </div>
        </div>
        <div class="map-card">
          <div class="map-card-title">
            <div class="text"><span>产业分布</span></div>
            <div class="line2"></div>
            <div class="line"></div>
          </div>
          <div class="map-card-body">
            <div
              ref="b6"
              id="b6"
            ></div>
          </div>
        </div>
      </div>
      
    </div>
  </div>
</template>

<style lang="scss" scoped>
.MDshow {
  display: block;
}
#amap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.amap-marker-label {
  // position: relative;
  width: 10px;
  height: 10px;
  background: rgba(246, 4, 4, 0.657);
  border: 1px solid rgba(79, 117, 240, 0.5);
  border-radius: 180%;
  color: rgba(79, 117, 240, 0);
}
.amap-marker-label:hover {
  width: 300px;
  height: 20px;
  background: rgba(255, 255, 255,1);
  font-size: 20px;
  border-radius: 10px;
  padding: 5px;
  color: rgb(17, 17, 17);
  border: 2px solid rgb(79, 116, 240);
}

.mapview-main {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  // background: url("../assets/bg.png") repeat;
  .mapview-main-border {
    width: 100%;
    height: 100%;
    display: flex;
    .mapview-bg {
      background: #97999b;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
}
.box-left {
  pointer-events: none;
  z-index: 10;
  width: 40%;
  padding: 5px;
  .map-top {
    background: #171a1b57;
    border: 2px solid #133040;
    border-radius: 0 0 3px 3px;
    width: 340px;
    .num-cade {
      width: 200px;
      height: 100px;
      text-align: left;
      font-size: 14px;
      color: #c2e1e8;
      float: right;
      .logo {
        float: left;
        padding: 10px;
        padding-top: 20px;
      }
    }
    .num {
      padding: 0 4px;
      border-radius: 2px;
      color: #000000;
      font-size: 30px;
      font-weight: bolder;
      margin-top: 10px;
      margin-right: 3px;
      word-wrap: break-word !important;
      box-sizing: border-box !important;
      background-color: #49b0eb;
    }
    .num-c {
      display: flex;
    }
  }
}
.box-center {
  pointer-events: auto;
  width: 60%;
  height: 100%;
  .titel {
    text-align: center;
    font-size: 20px;
    color: #42a9e3;
    margin-top: 8px;
  }
  .button-holder {
    color: #fff;
    margin-top: 3%;
  }
  //   4000383535
  .regular-radio {
    display: none;
  }
  .regular-radio + label {
    -webkit-appearance: none;
    background-color: #fff;
    border: 1px solid #aaa;
    padding: 9px;
    border-radius: 50px;
    display: inline-block;
    position: relative;
  }

  .regular-radio:checked + label:after {
    content: " ";
    width: 12px;
    height: 12px;
    border-radius: 50px;
    position: absolute;
    top: 3px;
    background: #42a9e3;
    box-shadow: 0px 0px 5px 0px #47d9bf;
    left: 3px;
  }
}
.box-tag {
  position: absolute;
  bottom: 30px;
  left: 22%;
  display: flex;
  color: #fff;
  font-size: 16px;
  .tag {
    width: 120px;
    padding: 5px 5px;
    margin-right: 10px;
  }
  .no {
    border: 1px solid #81a9da;
  }
  .yes {
    background: #81a9da;
    color: #000000;
  }
}
.box-right {
  pointer-events: none;
  width: 40%;
  padding: 5px;
  .circle_process {
    position: relative;
    width: 200px;
    height: 140px;
    margin: 30px auto 5px;
  }
  .circle_process .wrapper {
    width: 70px;
    height: 140px;
    position: absolute;
    top: 0;
    overflow: hidden;
  }

  .circle_process .right {
    right: 31px;
  }
  .circle_process .left {
    left: 30px;
  }
  .circle_process .circle {
    width: 120px;
    height: 120px;
    border: 10px solid #666;
    border-radius: 50%;
    position: absolute;
    top: 0;
    transform: rotate(-135deg);
  }
  .circle_process .rightcircle {
    border-top: 10px solid rgb(57, 135, 239);
    border-right: 10px solid rgb(57, 135, 239);
    right: 0;
  }

  .circle_process .leftcircle {
    border-bottom: 10px solid rgb(57, 135, 239);
    border-left: 10px solid rgb(57, 135, 239);
    left: 0;
  }

  .active-animation-right {
    animation: circle_right 4s linear forwards;
    -webkit-animation: circle_right 4s linear forwards;
  }
  .active-animation-left {
    animation: circle_right 4s linear forwards;
    -webkit-animation: circle_left 4s linear forwards;
  }
  @-webkit-keyframes circle_right {
    0% {
      -webkit-transform: rotate(-135deg);
    }
    50%,
    100% {
      -webkit-transform: rotate(45deg);
    }
  }
  @-webkit-keyframes circle_left {
    0%,
    50% {
      -webkit-transform: rotate(-135deg);
    }
    100% {
      -webkit-transform: rotate(45deg);
    }
  }

  .paused-animation {
    animation-play-state: paused;
    -webkit-animation-play-state: paused; /* Safari 和 Chrome */
  }
  .active-animation {
    animation-play-state: running;
    -webkit-animation-play-state: running; /* Safari 和 Chrome */
  }

  .middle-circle {
    width: 30px;
    height: 72px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    // background: url("../images/record/record_btn_mini.png") no-repeat center 100% / 100%;
  }
  .middle-circle img {
    display: block;
    width: 30px;
    height: 72px;
  }
  .search {
    position: relative;
    width: 100%;
    height: 30px;
    top: -30%;
    .bar5 {
      background: none;
    }
    .bar5 input,
    .bar5 button {
      background: none;
    }
    .bar5 input {
      border: 2px solid #bbdaeb;
    }
    .bar5 button {
      top: 0;
      right: 0;
    }
    .bar5 button:before {
      content: "\f002";
      font-family: FontAwesome;
      font-size: 16px;
      color: #f9f0da;
    }
    .bar5 input:focus {
      border-color: #311c24;
    }
  }
}
#mapview {
  height: 100%;
}
.map-card {
  position: relative;
  color: #ffffff;
  margin-bottom: 20px;
  .map-card-title {
    position: relative;
    height: 33px;
    display: flex;
    .text {
      padding: 4px;
      border: 2px solid #1b1f226b;
      border-bottom: none;
      border-right: none;
      color: #c2e1e8;
      font-size: 14px;
      position: relative;
      padding-right: 5px;
      border-radius: 3px;
      > span {
        background: #1b1f226b;
        padding: 0 10px;
        display: inline-block;
        line-height: 32px;
      }
      &:after {
        content: "";
        border-right: 10px solid transparent;
        border-bottom: 30px solid #0c1c24;
        position: absolute;
        bottom: -4px;
        right: -5px;
      }
    }
    .line {
      flex-grow: 1;
      height: 30px;
      border-bottom: 2px solid #133040;
    }
    .line2 {
      width: 7px;
      height: 33px;
      border-left: 3px solid #133040;
      transform: rotateZ(-18deg) translate(4px, 0px);
    }
  }
  .map-card-body {
    border: 2px solid #133040;
    border-radius: 0 0 3px 3px;
    border-top: none;
    padding: 4px;
    > div {
      background: #1b1f226b;
    }
    #b1,
    #b2,
    #b3,
    #b4,
    #b5,
    #b6 {
      position: relative;
      height: 150px;
    }
  }
}
.map-card-alt {
  position: relative;
  right: 3%;
  top: 3%;
  color: #ffffff;
  margin-bottom: 20px;
  .map-card-title {
    position: relative;
    height: 32px;
    display: flex;
    .text {
      padding: 4px;
      border: 2px solid #2b3236d7;
      border-bottom: none;
      border-right: none;
      color: #c2e1e8;
      font-size: 14px;
      position: relative;
      padding-right: 5px;
      border-radius: 3px;
      > span {
        background: #2b3236d7;
        padding: 0 10px;
        display: inline-block;
        line-height: 32px;
      }
      &:after {
        content: "";
        border-right: 10px solid transparent;
        border-bottom: 30px solid #2b3236d7;
        position: absolute;
        bottom: -4px;
        right: -5px;
      }
    }
    .line {
      flex-grow: 1;
      height: 30px;
      border-bottom: 2px solid #2b3236d7;
    }
    .line2 {
      width: 7px;
      height: 33px;
      border-left: 3px solid #133040;
      transform: rotateZ(-18deg) translate(4px, 0px);
    }
  }
  .map-card-body {
    background: #2b3236d7;
    border: 2px solid #133040;
    border-radius: 0 0 3px 3px;
    border-top: none;
    padding: 4px;
    > div {
      width: 100%;
      height: 100%;
    }
    .tu-body {
      display: flex;
      #d2,
      #d1 {
        height: 400px;
        width: 400px;
      }
    }
  }
  .line-card-body {
    // margin-top: 450px;
    background: #1b1f22d7;
    border: 2px solid #133040;
    border-radius: 0 0 3px 3px;
    width: 100%;
    height: 300px;
    > div {
      width: 100%;
      height: 100%;
      background: #2b3236d7;
    }
  }
}
.map-card-cen {
  position: relative;
  right: 3%;
  top: 53%;
  color: #ffffff;
  margin-bottom: 20px;
  .map-card-title {
    position: relative;
    height: 32px;
    display: flex;
    .text {
      padding: 4px;
      border: 2px solid #2b3236d7;
      border-bottom: none;
      border-right: none;
      color: #c2e1e8;
      font-size: 14px;
      position: relative;
      padding-right: 5px;
      border-radius: 3px;
      > span {
        background: #2b3236d7;
        padding: 0 10px;
        display: inline-block;
        line-height: 32px;
      }
      &:after {
        content: "";
        border-right: 10px solid transparent;
        border-bottom: 30px solid #2b3236d7;
        position: absolute;
        bottom: -4px;
        right: -5px;
      }
    }
    .line {
      flex-grow: 1;
      height: 30px;
      border-bottom: 2px solid #2b3236d7;
    }
    .line2 {
      width: 7px;
      height: 33px;
      border-left: 3px solid #133040;
      transform: rotateZ(-18deg) translate(4px, 0px);
    }
  }
  .map-card-body {
    background: #1b1f226b;
    border: 2px solid #133040;
    border-radius: 0 0 3px 3px;
    border-top: none;
    padding: 4px;
    // height: 500px;
    > div {
      width: 100%;
      height: 100%;
      // background: #2b3236d7;
    }
    .map-card-body-alt {
    }
    .tu-body {
      display: flex;
      #d2,
      #d1 {
        // position: relative;
        width: 400px;
        height: 400px;
      }
    }
  }
  .line-card-body {
    // margin-top: 450px;
    background: #1b1f22d7;
    border: 2px solid #133040;
    border-radius: 0 0 3px 3px;
    width: 100%;
    height: 300px;
    > div {
      width: 100%;
      height: 100%;
      background: #2b3236d7;
    }
  }
}
</style>
<script>
import nantong from "@/geo/nantong";
import * as echarts from "echarts";
import "vue-bmap-gl/dist/style.css";
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  VisualMapComponent,
  GeoComponent
} from "echarts/components";
import {
  GlobeComponent,
} from "echarts-gl/components";
import {
  MapChart,
  ScatterChart,
  PieChart,
  BarChart,
  LineChart
} from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import myHttp from "../router/httpStone";
echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  VisualMapComponent,
  GeoComponent,
  GlobeComponent,
  PieChart,
  BarChart,
  LineChart,
  MapChart,
  ScatterChart,
  CanvasRenderer
]);
import Recorder from "recorder-core";
import "recorder-core/src/engine/wav";
import "recorder-core/src/engine/mp3-engine";
//由于大部分情况下ios-weixin的支持需要用到amr解码器，应当把amr引擎也加载进来
import "recorder-core/src/engine/beta-amr";
import "recorder-core/src/engine/beta-amr-engine";
// eslint-disable-next-line no-irregular-whitespace
import { useStore } from "vuex";

export default {
  name: "Home",
  components: {},
  data() {
    return {
      store: useStore(), //此处初始化store对象
      audioBtnType: "开始录音",
      leftCircleAnim: "",
      rightCircleAnim: "",
      startTime: "",
      endTime: "",
      flag: 0,
      alimap: null,
      shwTip: false,
      rec: Recorder({
        type: "wav",
        sampleRate: 16000,
        bitRate: 16,
        onProcess: function() {}
      }),
      tegData: {},
      serverIP: "/api/",
      tags: ["金融", "政府", "公共卫生", "教育", "通信", "工业"],
      selectedTags: "all",
      zcTotle: "9876",
      dwTotle: [],
      checked1: false,
      checked2: false,
      checked3: false,
      mychart: null,
      mychartLine1: {},
      mychartD1: {},
      mychartD2: {},
      mychartB1: {},
      mychartB2: {},
      mychartB3: {},
      mychartB4: {},
      mychartB5: {},
      mychartB6: {},
      allData: []
    };
  },
  mounted() {
    this.alimap = this.$refs.alimap;
    echarts.registerMap("world", nantong);
    myHttp.mypost("/map", {}).then(res => {
      this.allData = res.allData;
      this.store.dispatch("setMapCompanys", res.allData);
      this.initChart();
      this.dwTotle = this.allData.length + "";
    });
    this.rec.open(function() {});
    setTimeout(() => {
      this.setTimePost();
    }, 5000);
  },
  methods: {
    /**关闭弹窗 */
    cloceWindow() {
      this.shwTip = false;
    },
    /** 轮询请求数据 */
    setTimePost() {
      //判断地图是否能下监听
      let that = this;
      setTimeout(() => {
        myHttp.mypost("/getLine", {}).then(res => {
          that.setLineDatas(res, "line1");
          that.setTimePost();
        });
      }, 5000);
    },
    /**开始录音**/
    recStart() {
      this.audioBtnType = "开始录音";
      // const _that = this;
      //打开了录音后才能进行start、stop调用
      this.rec.start();
      this.startTime = new Date().getTime();
      this.flag = -1; // 第二次重洗开始动画，这个触发watch监听
      setTimeout(() => {
        // _that.$refs.rightcircle.setAttribute("class", " active-animation-right");
        // _that.$refs.leftcircle.setAttribute("class"," active-animation-left");
      }, 100);
      // _that.$refs.rightcircle.setAttribute("css","-webkit-animation-play-state", "running");
      // _that.$refs.leftcircle.setAttribute("css","-webkit-animation-play-state", "running");
    },
    /**结束录音**/
    recStop() {
      this.audioBtnType = "完成录音";
      // let Base64 = require("js-base64").Base64;
      this.rec.stop(
        (blob, duration) => {
          //  var voiceToTextRes = ""
          this.showRecordingBox = false;
          console.log(
            blob,
            window.URL.createObjectURL(blob),
            "时长:" + duration + "ms"
          );
          //已经拿到blob文件对象想干嘛就干嘛：立即播放、上传
          /*** 【立即播放例子】 ***/
          var reader = new FileReader();
          reader.onloadend = () => {
            var voiceRes = reader.result;
            var VoiceData = voiceRes.substring(voiceRes.indexOf(",") + 1);
            myHttp
              .myVideoPost({ VoiceData })
              .then(res => {
                this.tegData = res;
                this.allData = this.tegData.gs;
                let resData = {
                  type: res.type,
                  text:
                    res.type == "公司详情"
                      ? (res.text = res.gs[0]["name"] || res.gs)
                      : res["text"]
                };
                this.getAdeio(resData);
                this.onChange(res.mapData);
                this.dewDilge(res.mapData["d1Data"]);
              })
              .catch(err => {
                console.log(err);
              });
          };
          reader.readAsDataURL(blob);
        },
        function(msg) {
          console.log("录音失败:" + msg);
          // this.rec.close();//可以通过stop方法的第3个参数来自动调用close
          // this.rec=null;
        }
      );
    },
    onChange(data) {
      console.log("onChange-commit-MY_EVENT_CHANEG_TRADE", data);
      this.store.dispatch("setMapCompanys", data);
      this.store.commit("setMapCompanys", data);
    },
    initChart() {
      const line1 = this.$refs.lineMap1;
      const b1 = this.$refs.b1;
      const b2 = this.$refs.b2;
      const b3 = this.$refs.b3;
      const b4 = this.$refs.b4;
      const b5 = this.$refs.b5;
      const b6 = this.$refs.b6;
      const data = this.getTypes(this.allData);
      const b1Data = data.b1Data;
      const b2Datas = data.b2Data;
      const b3Datas = data.b3Data;
      const b6Datas = data.b6Data;

      var COLOR_ALL = [
        "#99c6edb5",
        "#55b07194",
        "#ff5722b8",
        "#ffeb3b91",
        "#69d9e5b0",
        "#e13dbdb0"
      ];

      for (var i = 0; i < this.allData.length; i++) {
        this.allData[i].value = this.allData[i].value.split(",");
        switch (this.allData[i].type) {
          case "教育":
            this.allData[i].itemStyle = {
              color: COLOR_ALL[0]
            };
            break;
          case "工业":
            this.allData[i].itemStyle = {
              color: COLOR_ALL[1]
            };
            break;
          case "政府":
            this.allData[i].itemStyle = {
              color: COLOR_ALL[2]
            };
            break;
          case "金融":
            this.allData[i].itemStyle = {
              color: COLOR_ALL[3]
            };
            break;
          case "公共卫生":
            this.allData[i].itemStyle = {
              color: COLOR_ALL[4]
            };
            break;
          case "通信":
            this.allData[i].itemStyle = {
              color: COLOR_ALL[5]
            };
            break;

          default:
            break;
        }
      }
      //流量关系图
      const lineOption = {
        title: {
          text: "",
          subtext: "数据来自网络安全扫描服务器",
          left: "center",
          align: "right"
        },
        grid: {
          bottom: 80
        },
        dataZoom: [
          {
            show: false,
            realtime: true,
            start: 95,
            end: 100
          },
          {
            type: "inside",
            realtime: true,
            start: 95,
            end: 100
          }
        ],
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: { onZero: false },
            data: [].map(function(str) {
              return str.replace(" ", "\n");
            })
          }
        ],
        yAxis: [
          {
            name: "扫描漏洞量",
            type: "value",
            max: 500
          },
          {
            name: "漏洞量",
            nameLocation: "start",
            max: 5,
            type: "value",
            inverse: true
          }
        ],
        series: [
          {
            name: "流量",
            type: "line",
            areaStyle: {},
            lineStyle: {
              width: 1
            },
            emphasis: {
              focus: "series"
            },
            markArea: {
              silent: true,
              itemStyle: {
                opacity: 0.3
              },
              data: [
                [
                  {
                    xAxis: "2009/9/12\n7:00"
                  },
                  {
                    xAxis: "2009/9/22\n7:00"
                  }
                ]
              ]
            },
            data: [0.97, 0.96, 0.96, 0.41]
          },
          {
            name: "漏洞量",
            type: "line",
            yAxisIndex: 1,
            areaStyle: {},
            lineStyle: {
              width: 1
            },
            emphasis: {
              focus: "series"
            },
            markArea: {
              silent: true,
              itemStyle: {
                opacity: 0.3
              },
              data: [
                [
                  {
                    xAxis: "2009/9/10\n7:00"
                  },
                  {
                    xAxis: "2009/9/20\n7:00"
                  }
                ]
              ]
            },
            data: [0.032, 0.019, 0]
          }
        ]
      };
      // 类型分布
      const optionB1 = {
        color: [
          "#042436",
          "#08527D",
          "#08527D",
          "#0F6DA4",
          "#49B0EB",
          "#7DC5EE",
          "#A4D6F2"
        ],
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: ["20%", "40%"],
            center: ["50%", "50%"],

            label: {
              formatter: "{per|{d}%} \n {b|{b}}",

              rich: {
                b: {
                  color: "#fff",
                  fontSize: 12,
                  padding: [3, 0, 0, 0]
                },
                per: {
                  color: "#A4D6F2",
                  padding: [13, 0, 0, 0]
                }
              }
            },
            labelLine: {
              lineStyle: {
                color: "rgba(255, 255, 255, 0.3)"
              },
              smooth: 0.2,
              length: 10,
              length2: 20
            },
            data: b1Data
          }
        ]
      };
      // 操作系统
      const optionB2 = {
        xAxis: {
          max: 400,
          show: true,
          splitLine: { show: false }
        },
        yAxis: {
          type: "category",
          data: b2Datas.keys,
          show: false,
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: "dataMax" // only the largest 3 bars will be displayed
        },
        grid: {
          bottom: 150,
          top: 10,
          right: 20,
          left: 5,
          height: 120
        },
        series: [
          {
            name: "X",
            type: "bar",
            data: b2Datas.datas,
            itemStyle: {
              color: function() {
                return COLOR_ALL[Math.ceil(Math.random() * 6)] || "#5470c6";
              }
            },
            label: {
              show: true,
              position: "right",
              valueAnimation: true,
              formatter: "{b|{b}}",
              rich: {
                b: {
                  color: "#fff",
                  fontSize: 12,
                  padding: [3, 0, 0, 0]
                },
                per: {
                  color: "#A4D6F2",
                  padding: [13, 0, 0, 0]
                }
              }
            }
          }
        ],
        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: "linear",
        animationEasingUpdate: "linear"
      };
      //   协议分布
      const optionB3 = {
        xAxis: {
          max: 400,
          show: true,
          splitLine: { show: false }
        },
        yAxis: {
          type: "category",
          data: b3Datas.keys,
          show: false,
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: "dataMax" // only the largest 3 bars will be displayed
        },
        grid: {
          bottom: 150,
          top: 10,
          right: 20,
          left: 5,
          height: 120
        },
        series: [
          {
            realtimeSort: true,
            name: "X",
            type: "bar",
            data: b3Datas.datas,
            itemStyle: {
              color: function() {
                return COLOR_ALL[Math.ceil(Math.random() * 6)] || "#5470c6";
              }
            },
            label: {
              show: true,
              position: "right",
              valueAnimation: true,
              formatter: "{b|{b}}",
              rich: {
                b: {
                  color: "#fff",
                  fontSize: 12,
                  padding: [3, 0, 0, 0]
                },
                per: {
                  color: "#A4D6F2",
                  padding: [13, 0, 0, 0]
                }
              }
            }
          }
        ],

        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: "linear",
        animationEasingUpdate: "linear"
      };
      //   端口分布
      const optionB4 = {
        xAxis: {
          max: 400,
          show: true,
          splitLine: { show: false }
        },
        yAxis: {
          type: "category",
          data: ["80", "88", "42"],
          show: false,
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: "dataMax" // only the largest 3 bars will be displayed
        },
        grid: {
          bottom: 150,
          top: 10,
          right: 20,
          left: 5,
          height: 120
        },
        series: [
          {
            realtimeSort: true,
            name: "X",
            type: "bar",
            data: b2Datas.datas,
            itemStyle: {
              color: function() {
                return COLOR_ALL[Math.ceil(Math.random() * 6)] || "#5470c6";
              }
            },
            label: {
              show: true,
              position: "right",
              //   valueAnimation: true,
              formatter: "{b|{b}}",
              rich: {
                b: {
                  color: "#fff",
                  fontSize: 12,
                  padding: [3, 0, 0, 0]
                },
                per: {
                  color: "#A4D6F2",
                  padding: [13, 0, 0, 0]
                }
              }
            }
          }
        ],

        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: "linear",
        animationEasingUpdate: "linear"
      };
      //   规则分布
      const optionB5 = {
        xAxis: {
          max: 400,
          show: true,
          splitLine: { show: false }
        },
        yAxis: {
          type: "category",
          data: ["Nginx", "Tengine", "JAVA", "JSP"],
          show: false,
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: "dataMax" // only the largest 3 bars will be displayed
        },
        grid: {
          bottom: 150,
          top: 10,
          right: 20,
          left: 5,
          height: 120
        },
        series: [
          {
            realtimeSort: true,
            name: "X",
            type: "bar",
            data: b2Datas.datas,
            itemStyle: {
              color: function() {
                return COLOR_ALL[Math.ceil(Math.random() * 6)] || "#5470c6";
              }
            },
            label: {
              show: true,
              position: "right",
              //   valueAnimation: true,
              formatter: "{b|{b}}",
              rich: {
                b: {
                  color: "#fff",
                  fontSize: 12,
                  padding: [3, 0, 0, 0]
                },
                per: {
                  color: "#A4D6F2",
                  padding: [13, 0, 0, 0]
                }
              }
            }
          }
        ],

        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: "linear",
        animationEasingUpdate: "linear"
      };
      // 产业分布
      const optionB6 = {
        xAxis: {
          max: 400,
          show: true,
          splitLine: { show: false }
        },
        yAxis: {
          type: "category",
          data: b6Datas.keys,
          show: false,
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: "dataMax" // only the largest 3 bars will be displayed
        },
        grid: {
          bottom: 150,
          top: 10,
          right: 20,
          left: 5,
          height: 120
        },
        series: [
          {
            realtimeSort: true,
            name: "X",
            type: "bar",
            data: b6Datas.datas,
            itemStyle: {
              color: function() {
                return COLOR_ALL[Math.ceil(Math.random() * 6)] || "#5470c6";
              }
            },
            label: {
              show: true,
              position: "right",
              //   valueAnimation: true,
              formatter: "{b|{b}}",
              rich: {
                b: {
                  color: "#fff",
                  fontSize: 12,
                  padding: [3, 0, 0, 0]
                },
                per: {
                  color: "#A4D6F2",
                  padding: [13, 0, 0, 0]
                }
              }
            }
          }
        ],

        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: "linear",
        animationEasingUpdate: "linear"
      };

      this.mychartLine1 = echarts.init(line1);
      this.mychartB1 = echarts.init(b1);
      this.mychartB2 = echarts.init(b2);
      this.mychartB3 = echarts.init(b3);
      this.mychartB4 = echarts.init(b4);
      this.mychartB5 = echarts.init(b5);
      this.mychartB6 = echarts.init(b6);
      this.mychartLine1.setOption(lineOption);
      this.mychartB1.setOption(optionB1);
      this.mychartB2.setOption(optionB2);
      this.mychartB3.setOption(optionB3);
      this.mychartB4.setOption(optionB4);
      this.mychartB5.setOption(optionB5);
      this.mychartB6.setOption(optionB6);
      const d1 = this.$refs.d1;
      const d2 = this.$refs.d2;
      this.mychartD1 = echarts.init(d1);
      this.mychartD2 = echarts.init(d2);
    },
    handleChange(tag) {
      var selQS = this.$refs.radio1;
      selQS.checked = true;
      const nextSelectedTags = this.selectedTags != tag ? tag : "all";
      this.selectedTags = nextSelectedTags;
      var arr = this.getDataForType(this.selectedTags); // eslint-disable-line no-unused-vars
      this.setDatas(arr, nextSelectedTags);
    },
    setDatas(forData, tag) {
      this.dwTotle = "";
      this.zcTotle = "";
      var num = Math.ceil(Math.random() * (9876 - 10) + 10);
      setTimeout(() => {
        this.dwTotle = forData.length.toString();
        this.zcTotle = num.toString();
      }, 300);
      const b1 = this.$refs.b1;
      const b2 = this.$refs.b2;
      const b3 = this.$refs.b3;
      const b4 = this.$refs.b4;
      const b5 = this.$refs.b5;
      const b6 = this.$refs.b6;
      const data =
        tag == "all"
          ? this.getTypes(forData)
          : this.getTypesForType(forData, tag);
      const b1Data = data.b1Data;
      const b2Datas = data.b2Data;
      const b3Datas = data.b3Data;
      const b6Datas = data.b6Data;
      // 类型分布
      const optionB1 = {
        series: [
          {
            data: b1Data
          }
        ]
      };
      // 操作系统
      const optionB2 = {
        yAxis: {
          data: b2Datas.keys
        },
        series: [
          {
            data: b2Datas.datas
          }
        ],

        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: "linear",
        animationEasingUpdate: "linear"
      };
      //   协议分布
      const optionB3 = {
        yAxis: {
          data: b3Datas.keys
        },
        series: [
          {
            data: b3Datas.datas
          }
        ]
      };
      //   端口分布
      const optionB4 = {
        yAxis: {
          data: ["80", "88", "42"]
        },
        series: [
          {
            data: b2Datas.datas
          }
        ]
      };
      //   规则分布
      const optionB5 = {
        yAxis: {
          data: ["Nginx", "Tengine", "JAVA", "JSP"]
        },
        series: [
          {
            data: b2Datas.datas
          }
        ]
      };
      // 产业分布
      const optionB6 = {
        yAxis: {
          data: b6Datas.keys
        },
        series: [
          {
            data: b6Datas.datas
          }
        ]
      };

      this.mychartB1 = echarts.init(b1);
      this.mychartB2 = echarts.init(b2);
      this.mychartB3 = echarts.init(b3);
      this.mychartB4 = echarts.init(b4);
      this.mychartB5 = echarts.init(b5);
      this.mychartB6 = echarts.init(b6);
      this.mychartB1.setOption(optionB1);
      this.mychartB2.setOption(optionB2);
      this.mychartB3.setOption(optionB3);
      this.mychartB4.setOption(optionB4);
      this.mychartB5.setOption(optionB5);
      this.mychartB6.setOption(optionB6);
    },
    /**
     * setline
     */
    setLineDatas(data, type) {
      //流量关系图
      const lineOption = {
        xAxis: [
          {
            data: data.line1.xAxisData.map(function(str) {
              return str.replace(" ", "\n");
            })
          }
        ],
        series: [
          {
            data: data.line1.series01
          },
          {
            data: data.line1.series02
          }
        ]
      };
      if (type == "line1") {
        this.mychartLine1.setOption(lineOption);
      }
    },
    /**
     * 构建中间对话框
     */
    dewDilge(data) {
      this.shwTip = true;
      // d1 饼图
      const optionD1 = {
        color: [
          "#042436",
          "#08527D",
          "#0F6DA4",
          "#49B0EB",
          "#7DC5EE",
          "#A4D6F2"
        ],
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: ["20%", "40%"],
            center: ["50%", "50%"],

            label: {
              formatter: "{per|{d}%} \n {b|{b}}",

              rich: {
                b: {
                  color: "#fff",
                  fontSize: 12,
                  padding: [3, 0, 0, 0]
                },
                per: {
                  color: "#A4D6F2",
                  padding: [13, 0, 0, 0]
                }
              }
            },
            labelLine: {
              lineStyle: {
                color: "rgba(255, 255, 255, 0.3)"
              },
              smooth: 0.2,
              length: 10,
              length2: 20
            },
            data: data
          }
        ]
      };
      const optionD2 = {
        color: [
          "#042436",
          "#08527D",
          "#0F6DA4",
          "#49B0EB",
          "#7DC5EE",
          "#A4D6F2"
        ],
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: ["20%", "40%"],
            center: ["50%", "50%"],

            label: {
              formatter: "{per|{d}%} \n {b|{b}}",

              rich: {
                b: {
                  color: "#fff",
                  fontSize: 12,
                  padding: [3, 0, 0, 0]
                },
                per: {
                  color: "#A4D6F2",
                  padding: [13, 0, 0, 0]
                }
              }
            },
            labelLine: {
              lineStyle: {
                color: "rgba(255, 255, 255, 0.3)"
              },
              smooth: 0.2,
              length: 10,
              length2: 20
            },
            data: data
          }
        ]
      };

      this.mychartD1.setOption(optionD1);
      this.mychartD2.setOption(optionD2);
    },
    // 返回重点单位
    getData(v) {
      var arr = [];
      if (v == 2) {
        for (var i = 0; i < this.allData.length; i++) {
          if (this.allData[i].isKey > 0) {
            arr.push(this.allData[i]);
          }
        }
      } else {
        arr = this.allData;
      }
      return arr;
    },
    // 返回重点单位
    getDataForType(v) {
      var arr = []; // eslint-disable-line no-unused-vars
      if (v != "all") {
        for (var i = 0; i < this.allData.length; i++) {
          if (this.allData[i].type == v) {
            arr.push(this.allData[i]);
          }
        }
      } else {
        arr = this.allData;
      }
      return arr;
    },
    // 整体数据过滤
    getTypes(data) {
      var typeNameArr = {
        b1Data: [
          {
            value: 0,
            name: "教育"
          },
          {
            value: 0,
            name: "工业"
          },
          {
            value: 0,
            name: "政府"
          },
          {
            value: 0,
            name: "金融"
          },
          {
            value: 0,
            name: "公共卫生"
          },
          {
            value: 0,
            name: "通信"
          }
        ],
        b2Data: {
          keys: ["windows", "centOs", "ubuntu"],
          datas: [0, 0, 0]
        },
        b3Data: {
          keys: ["http", "https", "pop3"],
          datas: [0, 0, 0]
        },
        b6Data: {
          keys: [
            "安全产品",
            "物联网设备",
            "企业应用",
            "网络产品",
            "支撑系统",
            "系统软件",
            "办公外设"
          ],
          datas: [0, 0, 0, 0, 0, 0, 0]
        }
      };
      for (let i = 0; i < data.length; i++) {
        const teg = data[i];
        for (let j = 0; j < typeNameArr.b1Data.length; j++) {
          if (teg.type == typeNameArr.b1Data[j].name) {
            typeNameArr.b1Data[j].value += 1;
          }
        }
        for (let k = 0; k < typeNameArr.b2Data.keys.length; k++) {
          const key = typeNameArr.b2Data.keys[k];
          const key3 = typeNameArr.b3Data.keys[k];
          if (teg.system == key) {
            typeNameArr.b2Data.datas[k] += 1;
          }
          if (teg.protocols == key3) {
            typeNameArr.b3Data.datas[k] += 1;
          }
        }
        for (let z = 0; z < typeNameArr.b6Data.keys.length; z++) {
          const key6 = typeNameArr.b6Data.keys[z];
          if (teg.addressType == key6) {
            typeNameArr.b6Data.datas[z] += 1;
          }
        }
      }
      return typeNameArr;
    },
    // 通过行业数据过滤
    getTypesForType(data, type) {
      var typeNameArr = {
        b1Data: [
          {
            value: 0,
            name: type
          }
        ],
        b2Data: {
          keys: ["windows", "centOs", "ubuntu"],
          datas: [0, 0, 0]
        },
        b3Data: {
          keys: ["http", "https", "pop3"],
          datas: [0, 0, 0]
        },
        b6Data: {
          keys: [
            "安全产品",
            "物联网设备",
            "企业应用",
            "网络产品",
            "支撑系统",
            "系统软件",
            "办公外设"
          ],
          datas: [0, 0, 0, 0, 0, 0, 0]
        }
      };
      for (let i = 0; i < data.length; i++) {
        const teg = data[i];
        for (let j = 0; j < typeNameArr.b1Data.length; j++) {
          if (teg.type == typeNameArr.b1Data[j].name) {
            typeNameArr.b1Data[j].value += 1;
          }
        }
        for (let k = 0; k < typeNameArr.b2Data.keys.length; k++) {
          const key = typeNameArr.b2Data.keys[k];
          const key3 = typeNameArr.b3Data.keys[k];
          if (teg.system == key) {
            typeNameArr.b2Data.datas[k] += 1;
          }
          if (teg.protocols == key3) {
            typeNameArr.b3Data.datas[k] += 1;
          }
        }
        for (let z = 0; z < typeNameArr.b6Data.keys.length; z++) {
          const key6 = typeNameArr.b6Data.keys[z];
          if (teg.addressType == key6) {
            typeNameArr.b6Data.datas[z] += 1;
          }
        }
      }
      return typeNameArr;
    },
    /**返回语音音**/
    getAdeio(v) {
      myHttp
        .mypost("/gatAudio", v)
        .then(res => {
          var audio = document.getElementById("myAudio");
          audio.controls = true;
          audio.src = this.serverIP + res.videoUrl;
          // console.log(audio.url, "==================res.videoUrl");
          //简单利用URL生成播放地址，注意不用了时需要revokeObjectURL，否则霸占内存
          audio.play();
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
